<template>
  <!-- <mEcharts :options="state.options" :height="state.height" :width="state.width" /> -->
  <Echart :options="state" :height="300" />
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref()
const props = defineProps({
  // 图表数据项
  chartData: {
    type: Object,
    default: () => ({}),
    require: true
  }
})
const { chartData } = props
console.log('chartData', chartData)
const state = reactive({
  title: {
    // text: '通过率',
    // left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: chartData.category || []
  },
  series: [
    {
      name: '通过率',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: chartData.barData || []
    }
  ]
})
// const state = reactive({
//   height: '200px',
//   width: '100%',
//   options: {
//     tooltip: {
//       show: true,
//       trigger: 'item',
//       axisPointer: {
//         type: 'shadow',
//         label: {
//           show: true,
//           backgroundColor: '#7B7DDC'
//         }
//       }
//     },
//     legend: {
//       show: true
//     },
//     grid: {
//       x: '8%',
//       width: '88%',
//       top: '5%',
//       bottom: '10%'
//     },
//     xAxis: {
//       data: chartData.category,
//       axisLine: {
//         lineStyle: {
//           color: '#B4B4B4'
//         }
//       },
//       axisTick: {
//         show: false
//       }
//     },
//     yAxis: [
//       {
//         splitLine: { show: false },
//         axisLine: {
//           lineStyle: {
//             color: '#B4B4B4'
//           }
//         },

//         axisLabel: {
//           formatter: '{value} '
//         }
//       },
//       {
//         splitLine: { show: false },
//         axisLine: {
//           lineStyle: {
//             color: '#B4B4B4'
//           }
//         },
//         axisLabel: {
//           formatter: '{value} '
//         }
//       }
//     ],
//     series: [
//       {
//         // name: '不达标',
//         type: 'bar',
//         barWidth: 10,
//         itemStyle: {
//           normal: {
//             barBorderRadius: 5,
//             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//               { offset: 0, color: '#e7bcf3' },
//               { offset: 1, color: '#3EACE5' }
//             ])
//           }
//         },
//         data: chartData.barData
//       }
//     ]
//   }
// })
// watch(
//   () => props.chartData,
//   (val: any) => {
//     state.options.legend.data = val.titleArr
//     state.options.series[0].data = val.dataArr
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// )
</script>

<style scoped></style>
